<template lang="pug">
.my-nav
  el-menu.el-menu(
    :default-active="route",
    mode="horizontal",
    active-text-color="#409eff",
    router
  )
    el-menu-item(index="/") 最新
    el-menu-item(index="/class") 分类
    el-menu-item(index="/hot-user", disabled) 名人堂
    el-menu-item(index="/about") 关于

    el-dropdown.list(v-if="getToken", trigger="click", @command="handleCommand")
      span.user-about
        el-avatar(class="avatar", :src="userPhoto")
      el-dropdown-menu(slot="dropdown")
        el-dropdown-item(icon="el-icon-edit" command="editor") 发表
        el-dropdown-item(icon="el-icon-switch-button" command="quit") 退出
    //- .list(v-else)
    el-button.btn(v-else, type="primary", @click="goLogin") 登录
</template>

<script>
import {mapGetters} from 'vuex'
export default {
  data() {
    return {
      userPhoto: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
    };
  },
  computed: {
    ...mapGetters(['getToken']),
    route() {
      return '/' + this.$route.path.replace("/", "");
    },
  },
  methods: {
    checkLoginStatus() {  // 暂无用
      const info = window.localStorage.getItem('token');
      if(info) {
        this.isLogin = true
      }
    },
    goLogin() {
      this.$router.push('/login')
    },
    handleCommand(command) {
      switch(command) {
        case 'quit':
          window.localStorage.clear()
          this.$store.commit('freshToken')
          this.$message({
            type: 'success',
            message: '退出成功'
          })
          this.$router.push('/').catch(
            error => {
              console.log(error); // 首页退出会报错，相同路由跳转两次
            }
          )
        break;
        case 'editor':
          this.$router.push({name: 'Editor'})
        break;
      }
    }
  },
  mounted() {
    // this.checkLoginStatus()
  }
};
</script>

<style lang="less" scoped>
.my-nav {
  position: relative;
  .el-menu {
    width: 60%;
    min-width: 400px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    .list {
      width: auto;
      position: relative;
      left: 25%;
      .user-about {
        cursor: pointer;
        position: relative;
        top: 10px;
      }
    }
    .btn {
      position: relative;
      top: 10px;
      left: 25%;
    }
  }
  @media screen and (max-width: 780px) {
    .el-menu {
      width: 100%;
      .list {
        left: 0;
      }
    }
  }
}
</style>